<template>
    <div class="header-container">
        <div class="l-contain">
            <el-button @click="handleMenu()" icon="el-icon-menu" size="mini"></el-button>
            <span class="text">首页</span>
        </div>
        <div class="r-contain">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="img" src="../assets/image/001.jpeg" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>

                </el-dropdown-menu>
                </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },
    methods:{
        handleMenu(){
            this.$store.commit('collapseMenu');
        }
    }
}
</script>
<style lang="less" scoped>

    .header-container{
        padding: 0 10px;
        background-color: #333;
        height: 60px;
        display: flex;  // flex 布局
        justify-content: space-between;
        align-items: center;
        .text{
            color: #fff;
            font-size: 12px;
            margin-left: 10px;
        }
        .r-contain{
            img{
                height: 40px;
                width: 40px;
                border-radius: 50%;
            }
        }
    }

</style>